<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX酒店后台管理系统 客房管理</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <!-- <script src="../JavaScript/initializationData.js"></script> -->
    <link rel="stylesheet" href="../css/zy/guestRoom.css">
</head>

<body class="clear">
    <header>
        <p>XX酒店后台管理系统</p>
        <div class="portrait clear">
            <!-- 头像 -->
            <div>
                <img src="../images/老板.webp" alt="">
            </div>
            <div id="quit">
                <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                </p>
                <button>退出<span class="iconfont icon-tuichu"></span></button>
            </div>
        </div>
    </header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
        <div class="container-fluid">
            <!-- 主导航选项 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="mianActive"><a href="./guestRoom.html">客房管理</a></li>
                    <li class=""><a href="./reserve.html">预定管理</a></li>
                    <li class=""><a href="./crm.html">房客管理</a></li>
                    <li class=""><a href="./orderForm.html">订单管理</a></li>
                    <li class=""><a href="./finance.html">财务管理</a></li>
                    <li class=""><a href="./staffManagement.html">员工管理</a></li>
                    <li class=""><a href="./personinMess.html">个人信息</a></li>
                    <li class=""><a href="./gonggao.html">公告</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <section>
        <!-- 二级导航条 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand">客房管理</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a>入住</a></li>
                        <li class=""><a>退房</a></li>
                        <li class=""><a>待清洁房间</a></li>
                        <li class=""><a>全部房间</a></li>
                        <li class=""><a>客房编辑</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <main>

            <!-- 入住 -->
            <div class="optionBody" id="checkIn">
                <p class="title">选择入住房间</p>
                <!-- 大房间 -->
                <p>大房间</p>
                <ul class="bigRooms clear">
                </ul>

                <p>中房间</p>
                <ul class="middleRooms clear">
                </ul>

                <p>小房间</p>
                <ul class="littleRooms clear">
                </ul>
            </div>

            <!-- 退房 -->
            <div class="optionBody" id="checkOut">
                <p class="title">选择退房房间</p>
                <!-- 大房间 -->
                <p>大房间</p>
                <ul class="bigRooms clear">
                </ul>

                <p>中房间</p>
                <ul class="middleRooms clear">
                </ul>

                <p>小房间</p>
                <ul class="littleRooms clear">
                </ul>
            </div>
            <!-- 待清洁房 -->
            <div class="optionBody" id="awaitSweep">
                <p class="title">选择待清洁房间</p>
                <!-- 大房间 -->
                <p>大房间</p>
                <ul class="bigRooms clear">
                </ul>

                <p>中房间</p>
                <ul class="middleRooms clear">
                </ul>

                <p>小房间</p>
                <ul class="littleRooms clear">
                </ul>
            </div>
            <!-- 全部房间 -->
            <div class="optionBody" id="allRooms">
                <p class="title">
                    全部房间
                    <span class="checkIn">待入住</span>
                    <span class="checkOut">已入住</span>
                    <span class="awaitSweep">待清洁</span>
                </p>
                <!-- 大房间 -->
                <p>大房间</p>
                <ul class="bigRooms clear">
                </ul>

                <p>中房间</p>
                <ul class="middleRooms clear">
                </ul>

                <p>小房间</p>
                <ul class="littleRooms clear">
                </ul>
            </div>
            <!-- 编辑房间 -->
            <div class="optionBody" id="editRooms">
                <p class="title">
                    编辑房间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-success" id="addRoomBut">添加房间</button>

                <div class="searchBox">
                    <div class="col-sm-4">
                        <select class="form-control">
                            <option value="0">房间号</option>
                            <option value="1">房间规格</option>
                            <option value="2">房间状态</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" placeholder="请输入房间信息">
                    </div class="col-sm-2">
                    <div>
                        <button class="btn btn-default" id="inquire">查询</button>
                    </div>
                </div>

                </p>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>房间号</th>
                            <th>房间规格</th>
                            <th>价格</th>
                            <th>预览图片</th>
                            <th>房间状态</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <!-- 分页导航按钮 -->
            <nav aria-label="..." id="editRoomsbutts">
                <ul class="pagination clear">
                    <li class="disabled" id="up">
                        <span aria-hidden="true">&laquo;</span>
                    </li>

                    <li id="next">
                        <span aria-hidden="true">&raquo;</span>
                    </li>
                </ul>
            </nav>
            <!-- 权限不足框 -->
            <div class="optionBody" id="insufficientPrivileges">

            </div>

            <!-- 入住模态框 -->
            <div class="modal fade" id="checkInOperation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="checkInOperationLabel">填写入住信息</h4>
                        </div>
                        <div class="modal-body">
                            <ul class="clear" id="roomInformation">
                                <label class="col-sm-4">房间信息</label>
                                <li>房间号:301</li>
                                <li>规格:大房间</li>
                                <li>价格:300￥/天</li>
                            </ul>
                            <!-- 输入框 -->
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="name" class="col-sm-3 control-label">客人姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="name" placeholder="输入房客姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="tel" class="col-sm-3 control-label">联系电话</label>
                                    <div class="col-sm-9">
                                        <input type="tel" class="form-control" id="tel" placeholder="输入房客电话">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="name" class="col-sm-3 control-label">身份证</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="idNum" placeholder="输入房客身份证">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sex" class="col-sm-3 control-label">性别</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="sex" placeholder="房客性别">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cashPledge" class="col-sm-3 control-label">押金</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="cashPledge" placeholder="输入押金金额">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remarks" class="col-sm-3 control-label">备注</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="remarks" placeholder="备注信息">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal" id="confirm">确认入住</button>
                            <button class="btn btn-default" data-dismiss="modal">取消操作</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 退房提示框 -->
            <div class="modal fade" id="checkOutOperation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal"
                                id="confirmcheckOut">确认</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 取消入住提示框 -->
            <div class="modal fade" id="cancelCheckInOperation" tabindex="-1" role="dialog"
                aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal"
                                id="confirmcancelCheckIn">确认</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 清洁提示框 -->
            <div class="modal fade" id="awaitSweepOperation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal"
                                id="confirmawaitSweep">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 修改房间弹框 -->
            <div class="modal fade" id="alterRoom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="checkInOperationLabel">修改房间信息</h4>
                        </div>
                        <div class="modal-body">
                            <!-- 输入框 -->
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <!-- 房间号(roomNumber)	房间规格(RoomSize)	价格(price)	预览图片(preview)	房间状态(roomState) 备注(remarks) -->
                                    <label for="roomNum" class="col-sm-3 control-label">房间号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="roomNum" placeholder="输入房间号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="RoomSize" class="col-sm-3 control-label">房间规格</label>
                                    <div class="col-sm-9">
                                        <select name="" id="RoomSize" class="form-control">
                                            <option value="0">大房间</option>
                                            <option value="1">中房间</option>
                                            <option value="2">小房间</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-3 control-label">价格</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="price" placeholder="输入房间价格">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="roomState" class="col-sm-3 control-label">房间状态</label>
                                    <div class="col-sm-9">
                                        <select name="" id="roomState" class="form-control">
                                            <option value="0">已入住</option>
                                            <option value="1">待入住</option>
                                            <option value="2">待清洁</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remarks" class="col-sm-3 control-label">备注</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="alterRoomRemarks"
                                            placeholder="备注信息">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal"
                                id="alterRoomConfirm">保存修改</button>
                            <button class="btn btn-default" data-dismiss="modal">取消修改</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 房间号重复提示框 -->
            <div class="modal fade" id="Repetition" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal">确定</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 确认删除提示框 -->
            <div class="modal fade" id="affirmDelOperation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal" id="affirmDel">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加房间弹框 -->
            <div class="modal fade" id="addRoom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">添加房间</h4>
                        </div>
                        <div class="modal-body">
                            <!-- 输入框 -->
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <!-- 房间号(roomNumber)	房间规格(RoomSize)	价格(price)	预览图片(preview)	房间状态(roomState) 备注(remarks) -->
                                    <label for="roomNum" class="col-sm-3 control-label">房间号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="addroomNum" placeholder="输入房间号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="roomSizePosition" class="col-sm-3 control-label">房间规格</label>
                                    <div class="col-sm-9">
                                        <select id="roomSizePosition" class="form-control">
                                            <option value="0">大房间</option>
                                            <option value="1">中房间</option>
                                            <option value="2">小房间</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-3 control-label">价格</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="addPrice" placeholder="输入房间价格">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="addalterRoomRemarks" class="col-sm-3 control-label">备注</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="addalterRoomRemarks"
                                            placeholder="备注信息">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default confirm" data-dismiss="modal"
                                id="addRoomRoomConfirm">确认添加</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 房间预览 -->
            <div id="roomPreview">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="..." alt="...">
                            <div class="carousel-caption">
                                预览图一
                            </div>
                        </div>
                        <div class="item">
                            <img src="..." alt="...">
                            <div class="carousel-caption">
                                预览图二
                            </div>
                        </div>
                        <div class="item">
                            <img src="..." alt="...">
                            <div class="carousel-caption">
                                预览图三
                            </div>
                        </div>
                        <div class="off">X</div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

        </main>
    </section>
    <footer>

    </footer>
    <script src="../JavaScript/zy/guestRoom.js"></script>
</body>

</html>